<template>
  <div>
    对象数据选择-多选- 布局结构修改 且右侧可用插槽
    <SelectObject ref="SelectObject" :disabled="disabled" :formOtherItems="formOtherItems"  show-type="slot" :config="selectConfig" v-model="selectData" :select-multiple="true" :selectShowView="selectShowView" :async-set-table-data="setTableData" :select-equals="selectEquals" :rightSlot="true" @confirm="confirm">
      <template #showSlot="{disabled, showFunc}">
        <button :disabled="disabled" @click="showFunc">插槽调用</button>
      </template>
      <template #rightSlot="selectData, tableData">
        <div v-for="(item, index) in selectData" :key="index" style="display: flex; justify-content: space-between;margin: 30px 0;">
          <span>{{item['test']}}</span>
          <span style="color: red;" @click="handleDelete(selectData, index)">删除</span>
        </div>
        <div></div>
      </template>
    </SelectObject>
    <button @click="handleRef()">ref调用</button>
  </div>
</template>

<script>
import SelectObject from '@localModules/ZhiXinLib/element-components/select-object';

export default {
  name: 'Demo01',
  // 定义用到的组件
  components: { SelectObject },
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins: [],
  // 属性定义使用对象的形式进行定义
  props: { indexProps: { type: String, default: 'indexProps' } },
  // 定义变量
  data() {
    return {
      selectData: [
        {
          666: '44410',
        },
      ],
      disabled: false,
      selectConfig: [
        {
          label: '第一列',
          prop: '666',
          'show-overflow-tooltip': true,
        },
        {
          label: '超长文字9999999999',
          prop: '99',
          minWidth: '500px',
        },
      ],
      formOtherItems: [
        {
          span: 24,
          label: '文本输入框',
          prop: 'inputText',
          type: 'input',
        },
      ],
    };
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {},
  // 监听属性值的变化
  watch: {
    // indexProps(val){
    //   console.log(val)
    // },
    selectData: {
      handler(value, oldValue) {
        console.log(value);
      },
      immediate: true,
      deep: true,
    },
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {},
  // 在页面创建完执行
  created() {},
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    handleRef() {
      this.$refs.SelectObject.dragDialogShow = true;
    },
    handleDelete(data, index) {
      data.splice(index, 1);
    },
    confirm(selectRows) {
      console.log(selectRows);
    },
    selectShowView(item) {
      return item['666'];
    },
    selectEquals(oldItem, newItem) {
      return oldItem['666'] === newItem['666'];
    },
    setTableData(data, page) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const value = [];
          for (
            let i = page.pageNum * 10;
            i < page.pageNum * 10 + page.pageSize;
            i++
          ) {
            if (i % 10 === 0) {
              value.push({
                666:
                  '4444444444444444444444444444444444444444444444444444444444444' +
                  i,
                test: '555' + i,
              });
            } else {
              value.push({
                666: '444' + i,
                test: '555' + i,
              });
            }
          }
          resolve({ data: value, total: 60 });
        }, 100);
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
